<template>
  <div>
    <a-form-model layout="inline" ref="logSearchRef" :model="operatorLogSearchModel">
      <a-form-model-item label="账号" prop="account">
        <a-input allowClear v-model="operatorLogSearchModel.account"></a-input>
      </a-form-model-item>
      <a-form-model-item label="起止日期">
        <a-range-picker
            valueFormat="YYYY-MM-DD HH:mm:ss"
            :value="[operatorLogSearchModel.startDate,operatorLogSearchModel.endDate]"
                        :locale="locale"  :show-time="{ format: 'HH:mm:ss' }"
                        format="YYYY-MM-DD HH:mm:ss"
                        :placeholder="['Start Time', 'End Time']"
                        @change="onChange"
                        @ok="onOk"/>
      </a-form-model-item>

      <a-form-model-item>
        <a-button type="primary" @click="searchBtn()">查询</a-button>
      </a-form-model-item>
      <a-form-model-item>
        <a-button @click="reSearchBtn()">重置</a-button>
      </a-form-model-item>
    </a-form-model>

    <a-card>

      <vxe-table   border
                 stripe
                 resizable
                 highlight-hover-row
                 :loading="loading"
                 :data="tableData"
                 :auto-resize="true">
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column  field="id" title="日志Id" width="100"></vxe-table-column>
        <vxe-table-column field="account" title="账号" ></vxe-table-column>
        <vxe-table-column field="reqUrl" title="请求接口" ></vxe-table-column>
        <vxe-table-column field="reqIp" title="请求IP" ></vxe-table-column>
        <vxe-table-column field="reqLocation" title="地理位置" ></vxe-table-column>

        <vxe-table-column field="businessMethod" title="触发业务" ></vxe-table-column>
        <vxe-table-column field="businessUnit" title="所属模块" ></vxe-table-column>
        <vxe-table-column field="reqToken" title="请求token" ></vxe-table-column>
        <vxe-table-column field="addTime" title="添加时间" show-overflow></vxe-table-column>
      </vxe-table>
      <vxe-pager
          background
          size="small"
          :loading="loading"
          :current-page="tablePage.currentPage"
          :page-size="tablePage.pageSize"
          :total="tablePage.totalResult"
          :page-sizes="[10, 20, 100]"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="handleNextPageChange">
      </vxe-pager>
    </a-card>

  </div>
</template>

<script>
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
export default {
  name: "OperationLog",
  data() {
    return {
      locale,
      loading: false,
      tableData: [],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0
      },
      operatorLogSearchModel:{
        account:undefined,
        startDate:null,
        endDate:null
      }
    }
  },
  mounted() {
    this.searchBtn();
  },
  methods: {
    onChange(date, dateString) {
      console.log(date);
      console.log( dateString);
      let arr = [];
      arr = dateString;
      this.operatorLogSearchModel.startDate = arr[0];
      this.operatorLogSearchModel.endDate = arr[1];
    },
    onOk(value) {
      console.log('onOk: ', value);
      let arr = [];
      arr = value;
      this.operatorLogSearchModel.startDate = arr[0];
      this.operatorLogSearchModel.endDate = arr[1];
    },



    searchBtn(){
      this.tablePage.currentPage = 1;
      let req = JSON.parse(JSON.stringify(this.operatorLogSearchModel))
      req.pageNo = this.tablePage.currentPage - 1;
      req.pageSize = this.tablePage.pageSize;
      this.execReqLogPage(req);
    },
    reSearchBtn(){
      this.$refs.logSearchRef.resetFields(); //使用前需要在 form-item上加注prop属性
      this.operatorLogSearchModel.startDate =null;
      this.operatorLogSearchModel.endDate =null;
      this.searchBtn();
    },
    handleNextPageChange({currentPage, pageSize}) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize;
      let req = JSON.parse(JSON.stringify(this.operatorLogSearchModel))
      req.pageNo = this.tablePage.currentPage - 1;
      req.pageSize = this.tablePage.pageSize;
      this.execReqLogPage(req);
    },

    execReqLogPage(req) {
      this.loading = true;
      this.$reqGlobal.get('/lte/operationLogPage', {params: req}).then(res => {
        this.loading = false;
        if (res.data.code === 0) {
          this.tableData = res.data.data.content;
          this.tablePage.totalResult = res.data.data.totalElements;
        } else {
          this.tableData = [];
          this.tablePage.totalResult = 0;
          this.$message.error("查询操作日志失败!");
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
